<template>
  <div>
    <!-- 当有v-model和value的时候，value就白写了 -->
    <input type="text" v-model="msg" value="123" />
    <p>{{ msg }}</p>
    <hr />
    <input type="checkbox" v-model="flag" />
    <hr />
    <select name="" id="" v-model="city">
      <option>上海</option>
      <option>北京</option>
      <option>深圳</option>
    </select>
  </div>
</template>

<script>
// 数据驱动是单向的，数据变了 视图跟着变 在vue中有且只有一个指令能实现双向的数据绑定 v-model (只能用于表单控件 input,select,textarea )
// v-model的规则
// 如果是只有一个表单控件，直接给表单控件加上v-model就行了 特殊情况是复选框只有二个值(true,false)
// 如果是一组（多个复选框，多个单选框）需要给每个表单控件加上同样的v-model值，然后value值也要有，但是不能一样 如果是复选框它的值是数组
export default {
  data() {
    return {
      msg: "hello world",
      flag: true,
      city: "北京",
    };
  },
};
</script>

<style scoped></style>
